<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  	<title>活动商品详情页面</title>
  	<link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
	  <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
  	<link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        #aui-header{position: fixed;top:0px;left: 0px;right: 0px;}
        #aui-header img{width: 1.05rem;height: 1.05rem;}
        .aui-bar-light{background-color:transparent !important; background-image: none !important;}
        .aui-bar-nav .aui-pull-right {height: 1.2rem !important;min-height: 1.2rem !important;max-height: 1.2rem !important;
          line-height: 1.2rem !important;}
        .content{}
        .swipe{width:10rem;height:10rem;overflow:hidden;box-sizing: border-box;position: relative;background: #fff;}
        .swipe-wrap .swipe-box {float: left;width: 100%;position: relative;}
    		.swipe-wrap .swipe-box img {width: 100%;height: 100%;object-fit: cover;}
        .swipe .pointer {display: flex;align-items: center;justify-content: center;position: absolute;bottom:0.3rem;right: 0;width:1.8rem;height:0.7rem;
          background-color: rgba(0, 0, 0, 0.4);border-bottom-left-radius: 0.4rem;border-top-left-radius: 0.4rem;}
        .swipe .pointer .left {font-size: 18px;color: #ffffff;}
        .swipe .pointer .right {font-size: 14px;color: #e5e5e5;}
        .goodsMsg{margin-bottom:1.44rem;}
        .goodsBox1{padding:0.267rem 0.267rem 0.2rem 0.267rem;width: 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;background: #fff;}
        .goodsTitle{width: 8rem;}
        .collectionBox{width: 1.5rem; text-align: center;}
        .goodsTitle p{height: 0.6rem;line-height:0.6rem !important;color: #212121;display: inline-block;font-family: PingFangSC-Blod;}
        .goodsTitle img{width:0.52rem;height:0.52rem;display: inline-block;vertical-align: text-bottom;}
        .goodsBox2{padding:0 0.267rem;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;font-family: PingFang-SC-Medium;background: #fff;}
        .goodsBox3{padding:0 0.267rem;font-family: PingFangSC-Blod;background: #fff;}
        .goodsBox4{padding:0.267rem 0.267rem;background: #fff;}
        .goodsBox4 .couponBox{width: 100%;height:1.826rem;box-sizing: border-box;background: url('../image/item_icon_coupon_bg.png');
          background-size: 100% 100%;display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
        .couponBox1{width: 6.435rem;}
        .couponBox1 p{text-align: center;}
        .couponBox div:nth-child(2){width: 2.855rem;display: flex;align-items: center;justify-content: center;}
        .goodsBox5{width:100%;height: 2.933rem;background: url('../image/goods_ExplanationBg.png');background-size: 100% 100%;position: relative;}
        .goodsBox5 .subsidyMsg{width: 100%;position: absolute;bottom:0.25rem;text-align: center;}
        .goodsBox6{margin: 0.267rem 0;background: #fff;}
        .shopMsgbox1{display: flex;flex-wrap: nowrap;justify-content: flex-start;padding:0.4rem}
        .shopMsgbox1 div:nth-child(1) img{width: 1.28rem;height: 1.28rem;margin-right: 0.5rem}
        .shopMsgbox1 div:nth-child(2) p{}
        .shopMsgbox1 div:nth-child(2) img{width:2rem;height: 0.44rem;}
        /*.shopMsgbox2{display: flex;flex-wrap: nowrap;justify-content: space-around;}*/
        .goodsBox7{width: 100%;background: #fff;}
        .goodsBox7 img{width: 100%;height: auto;}
        .footerBox{width: 100%;padding:0rem 0.4rem;position: fixed;bottom: 0px;left: 0px;right: 0px;background: #fff;display: flex;flex-wrap: nowrap;
          justify-content: space-between;align-items: center;box-sizing: border-box;}
        .footerBox .homeBox{margin:0.15rem 0;width: 1.92rem;height: 1.1rem;}
        .footerBox div:nth-child(1) img{margin: 0 auto}
        .footerBox div:nth-child(1) p{text-align: center;}
        .footerBox div:nth-child(2) img{margin: 0 auto}
        .footerBox div:nth-child(2) p{text-align: center;}
        .footerBox .btnBox{margin:0.15rem 0;width: 7.28rem;height: 1.1rem;border-radius: 0.6rem;display: flex;flex-wrap: nowrap;justify-content: space-between;overflow: hidden;}
        .btnBox div:nth-child(1){width: 3.64rem;height: 1.1rem;background: #f4bd5a;color: #fff !important;display: flex;align-items: center;justify-content: center;}
        .btnBox div:nth-child(2){width: 3.64rem;height: 1.1rem;background: #eb5a4b;color: #fff !important;display: flex;align-items: center;justify-content: center;}
        .ruleHint{position: fixed;right:0.26rem;font-size:0.32rem;background: rgba(0,0,0,0.4);color: #fff;padding: 0.1rem 0.26rem;
          border-radius:0.4rem;z-index: 999;}
        .triangle-down {display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right: 5px solid transparent;
          border-top:7px solid rgb(0,0,0,0.4);position: absolute;right:1.34rem;bottom:-7px;}
    </style>
</head>
<body id="wrap">
    <header class="aui-bar aui-bar-nav aui-bar-light sg-color-font1" id="aui-header">
        <a class="aui-pull-left"  tapmode onclick="closeWin()">
            <!-- <span class="aui-iconfont aui-icon-left sg-text-size36 sg-color-font1"></span> -->
            <img class="backImg" src="../image/item_icon_return.png" alt="">
        </a>
        <div class="aui-title sg-text-size36"></div>
        <a class="aui-pull-right" tapmode onclick="shareFun()">
            <!-- <span class="iconfont iconfenxiang sg-text-size36 sg-color-font1"></span> -->
            <img class="shearImg" src="../image/item_icon_share.png" alt="">
        </a>
    </header>
    <!-- 内容部分 -->
    <div class="content" id="app" v-cloak>
        <!-- 指示器 -->
        <div id='slider' class='swipe'>
            <div class='swipe-wrap'>
                <div class="swipe-box" v-for="item in goodsImg">
                    <img :src="item" onerror="showDefaultImg(this)">
                </div>
            </div>
            <div class="pointer">
                <div class="left">1/</div>
                <div class="right"></div>
            </div>
        </div>
        <!-- 商品详情 -->
        <div class="goodsMsg">
            <div class="goodsBox1" v-cloak>
                <div class="goodsTitle">
                    <p class="sg-text-size32">
                        <img v-if="" src="../image/goods/bill_icon_taobao.png" alt="">
                        {{goodsData.title != '' ? goodsData.title :  goodsData.short_title}}
                    </p>
                </div>
                <div class="collectionBox">
                    <span class="iconfont iconshoucang sg-text-size36"></span>
                    <p class="sg-text-size24 sg-color-font5">收藏</p>
                </div>
            </div>
            <div class="goodsBox2 sg-color-font5 sg-text-size28">
                <span>天猫价￥{{goodsData.zk_final_price}}</span>
                <span class="sg-text-size24">已抢{{goodsData.volume}}件</span>
            </div>
            <p class="goodsBox3 sg-text-size48 sg-color-font3"><span class="sg-text-size28">到手价￥</span>{{goodsData.end_price}}</p>
            <div class="goodsBox4">
                <div class="couponBox sg-color-font4">
                    <div class="couponBox1">
                        <p class="sg-color-font4 sg-text-size30">{{goodsData.coupon_amount}}元优惠券</p>
                        <p class="sg-color-font4 sg-text-size24">使用期限：{{goodsData.coupon_start_time}}-{{goodsData.coupon_end_time}}</p>
                    </div>
                    <div tapmode onclick="buyFun()">
                        <p class="sg-color-font4 sg-text-size32">立即领取</p>
                    </div>
                </div>
            </div>
            <div class="goodsBox5">
                <p class="subsidyMsg sg-color-font3 sg-text-size28">
                    <span>提醒：</span>使用天猫红包和集分宝将无法补贴
                    <span tapmode onclick="common_problem()">查看详情</span>
                </p>
            </div>
            <div class="goodsBox6">
                <div class="shopMsgbox1">
                    <div>
                        <img class="shopImg" src="" alt="">
                    </div>
                    <div>
                        <p class="sg-text-size28 sg-color-font2">{{goodsData.shop_title}}</p>
                        <img v-if="goodsData.user_type == 1" src="../image/tmall.png" alt="">
                        <img v-if="goodsData.user_type == 0" src="../image/taobao.png" alt="">
                    </div>
                </div>
                <!-- <div class="shopMsgbox2">
                    <div>宝贝描述&nbsp;4.9</div>
                    <div>卖家服务&nbsp;4.9</div>
                    <div>物流服务&nbsp;4.9</div>
                </div> -->
            </div>
            <div class="goodsBox7" v-cloak  v-html="goodsMsgImg">
                {{goodsMsgImg}}
            </div>
        </div>
        <div class="ruleHint">
            此商品仅限购买一次<span class="triangle-down"></span>
        </div>
        <div class="footerBox" id="footerBox">
            <div class="homeBox" tapmode onclick="closeWinFun()">
                <img src="../image/tabbar_icon_home_normal.png" style="width:20px;height:20px;" alt="">
                <p class="sg-text-size28 sg-color-font2">首页</p>
            </div>
            <div class="btnBox">
                <div tapmode onclick="shareFun()">
                    <p class="sg-text-size28 sg-color-font4">分享好友</p>
                </div>
                <div tapmode onclick="buyFun()" style="position:relative;">
                    <p class="sg-text-size28 sg-color-font4">{{goodsData.end_price}}元购买</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript" src="../script/vue.min.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
(function (doc, win) {
  	var docEl = doc.documentElement,
  	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  	recalc = function () {
    		var clientWidth = docEl.clientWidth;
    		if (!clientWidth) return;
    		docEl.style.setProperty('font-size',(clientWidth / 10) + 'px','important');
  	};
  	if(!doc.addEventListener){
        return
    };
  	win.addEventListener(resizeEvt, recalc, false);
  	doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
var app,goodsData,shopAvatarImg;
apiready = function () {
		//解析元素 tapmode 属性，优化点击事件处理 - 第四步
		api.parseTapmode();
    var header = $api.byId('aui-header');
		$api.fixStatusBar(header);
    $api.fixTabBar($api.byId('footerBox'));
    goodsData = api.pageParam.data;
    $api.text($api.dom(".pointer .right"), goodsData.pic_urls.length);
    $api.dom('.ruleHint').style.bottom = (api.safeArea.bottom + 56) + 'px';
    initializeData();
  	window.mySwipe = Swipe($api.byId('slider'), {
  			auto: 5000,
  			continuous: true,
  			callback: function (index, elem) {
  			    $api.text($api.dom(".pointer .left"), index + 1 + "/");
  			}
  	});
    $api.ajax({
				url: "api/goods/detail",
				method: 'get',
				data: {
						values: {
								item_id: goodsData.item_id,
								need_info:1,
								type:goodsData.type || 1
						}
				}
		}, function (ret,err) {
        if(ret){
            shopAvatarImg = ret.data.shop.pict_url;
            document.querySelector(".shopImg").src = ret.data.shop.pict_url
        }
		})
    // 获取商铺详情数据
    getGoodsData();

}

// 初始化数据
function initializeData(){
		app = new Vue({
				el: '#app',
				data: {
            goodsImg:goodsData.pic_urls,//商品轮播图信息
						goodsData:goodsData,//商品信息
            goodsMsgImg:'',//商品详情图片
				}
		});
}
// 获取商铺详情数据
function getGoodsData(){
    var desc_url = goodsData.desc_url.split("__");
    api.ajax({
        url: desc_url[0] + goodsData.item_id + desc_url[2] + "&AntiCreep=true&type=jsonp&dataType=jsonp&callback=mtopjsonp",
        method: 'get',
    }, function (ret, err) {
        if (ret) {
        } else {
            eval(err.body)
        }
    })
}

// 商品详情图片展示
function mtopjsonp(data) {
		if (data.data.wdescContent.pages) {
				var text = ""
				data.data.wdescContent.pages.forEach(item => {
						if (item.indexOf(".gif") == -1 && item.indexOf("<txt>") == -1) {
								text = text + item.replace("https:", "").replace("http:", "").replace(">//", ' src="https://').replace("</img", '"')
						}
				})
				app.goodsMsgImg = text
		}
    // 上滑改变顶部样式
		onscroll();
}


// 滚动样式优化
function onscroll(){
    var headerStyle = $api.dom(".aui-bar-light")
    document.getElementById("wrap").onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop ;    var headerStyle = $api.dom(".aui-bar-light")
        // 上滑滚动高度大于50时
        if( t > 100){
            $api.text($api.dom("#aui-header .aui-title"), "商品详情");
            $api.css($api.dom("#aui-header .aui-title"),"color:rgba(0,0,0," + t / 350 + ") !important");
            $api.css($api.dom(".aui-bar-light"),"background-color:rgba(255,255,255," + t / 350 + ") !important");
        }else{
            $api.text($api.dom("#aui-header .aui-title"), "");
            $api.css($api.dom(".aui-bar-light"),"background-color:transparent !important");
        }
        if(300 > t){
            $api.html($api.dom(".aui-pull-left"),"<img class='backImg' src='../image/item_icon_return.png' alt=''>");
            $api.html($api.dom(".aui-pull-right"),"<img class='shearImg' src='../image/item_icon_share.png' alt=''>");
            var backImg = $api.dom(".backImg")
            backImg.style.opacity = 1 - (t / 300);
            var shearImg = $api.dom(".shearImg")
            shearImg.style.opacity = 1 - (t / 300);
        }else{
            $api.html($api.dom(".aui-pull-left"),"<span class='aui-iconfont aui-icon-left sg-text-size36 sg-color-font1'></span>");
            $api.html($api.dom(".aui-pull-right"),"<span class='iconfont iconfenxiang sg-text-size36 sg-color-font1'></span>");
        }
    }
}
// 分享
function shareFun(){
    if (getToken()) {
        api.openFrame({
            reload: true,
            name: 'item_fx',
            url: './item_fx.html',
            bgColor: "rgba(0,0,0,0)",
            animation: {
                type: "movein",
                subType: "from_bottom",
                duration: 300
            },
            pageParam: {
                item: goodsData, //列表页商品详情数据
                detail:goodsData.pic_urls,  //商品轮播图片
                numberMoney:goodsData.per_price,
                type:goodsData.type,
                shopAvatarImg : shopAvatarImg
            }
        });
    }
}
// 立即购买
function buyFun(){
    $api.ajax({
        url: 'api/member/info',
        method: 'get',
    }, function (ret) {
        api.setGlobalData({
            key: 'member_info',
            value: ret.data.info,
        });
        // 判断用户是否登录并且是否授权
        if(isLoginFun(1)){
            if(isLoginFun(2)){
                if(goodsData.type == 4){  //密令商品类型
                    $api.ajax({
                        url: "api/goods/tbpwd",
                        method: 'get',
                        data: {
                            values: {
                                item_id: goodsData.item_id
                            }
                        }
                    }, function (ret,err) {
                        var aliBC = api.require('aliBC');
                        aliBC.showPageByUrl({
                            url: ret.data.send_url + api.getGlobalData({key: 'member_info'}).relation_id,
                            backUrl: api.systemType == "ios" ? "" : "tbopen24627965"
                        }, function (ret, err) {
                        });
                    })
                }else if(goodsData.type == 2){  //淘礼金商品
                    var dialogBox = api.require('dialogBox');
                    dialogBox.sendMessage({
                        texts: {
                            content: '您确定消耗您的领取资格吗?',
                            leftBtnTitle: '取消',
                            rightBtnTitle: '确定'
                        },
                        styles: {
                            bg: '#fff',
                            w: 300,
                            corner: 4,
                            content: {
                                marginT: 25,
                                marginB: 25,
                                color: '#000',
                                size: 16
                            },
                            topBorder:{                //（可选项）JSON对象类型；上分割线的设置
                               borderColor:'#000',    //（可选项）字符串类型；边界线颜色，支持#、rgb、rgba；默认：#000
                               borderWidth: 2,        //（可选项）数字类型；边界线的粗细，默认值：2
                               marginT: 10            //（可选项）数字类型；边界线的距离标题的下边距的距离，默认值：10
                            },
                            left: {
                                marginB: 15,
                                marginL: 20,
                                w: 110,
                                h: 35,
                                corner: 2,
                                bg: '#fff',
                                size: 16,
                                color:'#000'
                            },
                            right: {
                                marginB: 15,
                                marginL: 40,
                                w: 110,
                                h: 35,
                                corner: 2,
                                bg: '#fff',
                                size: 16,
                                color:'rgb(255,52,0)'
                            }
                        }
                    }, function(ret) {
                        if (ret.eventType == 'left') {
                            var dialogBox = api.require('dialogBox');
                            dialogBox.close({
                                dialogName: 'sendMessage'
                            });
                        }else{
                            var dialogBox = api.require('dialogBox');
                            dialogBox.close({
                                dialogName: 'sendMessage'
                            });
                            $api.ajax({
                                url: "api/goods/tbpwd",
                                method: 'get',
                                data: {
                                    values: {
                                        item_id: goodsData.item_id
                                    }
                                }
                            }, function (ret,err) {
                                console.log(JSON.stringify(ret))
                                if(ret.data.item_id == goodsData.item_id){
                                    var aliBC = api.require('aliBC');
                                    aliBC.showPageByUrl({
                                        url: ret.data.send_url + api.getGlobalData({key: 'member_info'}).relation_id,
                                        backUrl: api.systemType == "ios" ? "" : "tbopen24627965"
                                    }, function (ret, err) {});
                                }else{
                                    api.toast({
                                        msg: '您已经享受过该优惠了',
                                        duration: 2000,
                                        location: 'middle'
                                    });
                                }
                            })
                        }
                    });
                }
            }else{  //去授权
                authorizationFun()
            }
        }
    })
}
// 返回app首页
function closeWinFun(){
    api.execScript({
        name: 'root',
        script: "openFrameFun('home','home_main','./html/home/main.html')"
    });
    api.closeToWin({
        name: 'root'
    });
}
function closeWin(){
  api.closeWin({});
}
</script>
</html>
